<template> 
    <div class="app">
        <!-- 父传子 :titles=[""]数组的值传给子组件 -->
        <NavMovies @movieslist="listcontent"
        :titles="['你的名字','天气之子','玲芽之旅']"></NavMovies>
        <!-- 注册点击事件 点击数组的值触发 子传父 -->
        <!-- 记录索引 -->
        <h2>{{ more[nowindex] }}</h2>
        <!-- 作用域插槽 -->
        <NavMovies :titles="['你的名字','天气之子','玲芽之旅']" @movieslist="listcontent">
            <template #default="props">
                <button>{{ props.itemax }}</button>
            </template> 
        </NavMovies>
        <!-- 独占默认插槽简写 适用于只有一个插槽 具名插槽不适用 -->
        <NavMovies :titles="['百度','比应','谷歌']" #defalut="slotprops">
            <a>{{ slotprops.itema }}</a>
        </NavMovies>
    </div>

</template>
<script>
import NavMovies from './NavMovies.vue'
export default {
    components: {
        NavMovies
    },
    data() {
        return{
            more: ["2017你的名字", "2020天气之子", "2023玲芽之旅"],
            nowindex:0//当前索引
        }
    },
    methods: {
        // 拿到子组件传来的索引
        listcontent(index) {
            this.nowindex=index
        }
    }
}
</script>
<style scoped lang="less">
h2{
    text-align: center;
    color: #ffc88e;
}
</style>